<template>
  <div>
      <headers>
          <i @click="Sbackto()"></i>
          <span>必买清单</span>
          <div @click="select()" class="share el-icon-more-outline"></div>
      </headers>
      <div class="Mb"></div>
      <ul class="Slike" v-for="(item,index) in txt" :key="index">
                <li>
                     <img class="tu" :src="tu[index]" alt="">
                    <ul class="Slikemain" >
                <li  v-for="(item,index) in like[index]" :key="index">
                        <div >
                    <img class="Nbox" :src="item.src" alt="">
                  </div>
                  <div class="Nzi">
                    {{item.zi}}
                  </div>
                  <p class="Slikered">￥{{item.money}}</p>

                </li>
              </ul> 
              </li>
        </ul> 
        <a ref="to" class="Sback" href="#">
            <img src="../../assets/user/jiantou.png" alt="">
        </a>

        <img v-if="flag" class="Mjian" src="../../assets/user/sjian.png" alt="">
        <ul v-if="flag" class="select">
            <li @click="xuan(index)" class="Mli" v-for="(item,index) in obj" :key="index">
                <img :src="item.src" alt="" class="Mcolor">
                <span :class="{'actives':arr[index]}">{{item.con}}</span>
            </li>
        </ul>
  </div>
</template>

<script>
import Head from '../users/components/Head';
export default {
    name:'Must',
    components:{
        'headers':Head
    },
    data(){
        return{
            tu:[require('../../assets/user/new1.png'),require('../../assets/user/new1.png')],
            // 猜你喜欢
        like:[
            [
                {
            src:require('../../assets/user/milk2.png'),
            zi:'诺优能幼儿配方奶粉',
            money:59
        },
        {
            src:require('../../assets/user/milk2.png'),
            zi:'诺优能幼儿配方奶粉',
            money:129
        },
        {
            src:require('../../assets/user/milk2.png'),
            zi:'诺优能幼儿配方奶粉',
            money:88
        }
            ],
            [
                {
            src:require('../../assets/user/milk2.png'),
            zi:'诺优能幼儿配方奶粉',
            money:59
        },
        {
            src:require('../../assets/user/milk2.png'),
            zi:'诺优能幼儿配方奶粉',
            money:129
        },
        {
            src:require('../../assets/user/milk2.png'),
            zi:'诺优能幼儿配方奶粉',
            money:88
        }
            ]
            
        ],
        txt:['奶粉专区','纸尿裤专区'],
        obj:[
            {
                src:require('../../assets/user/must1.png'),
                con:'消息'
            },
            {
                src:require('../../assets/user/must2.png'),
                con:'首页'
            },
            {
                src:require('../../assets/user/must3.png'),
                con:'分享'
            },
            {
                src:require('../../assets/user/personal.png'),
                con:'个人中心'
            }
        ],
        flag:false,
        arr:[false,false,false,false,false]
        }
    },
    methods:{
        scrollToTop() { 
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop>200) {
                this.$refs.to.style.display = 'block';
            }else{
                this.$refs.to.style.display = 'none';
            }
        },
        select(){
            this.flag = !this.flag
        },
        xuan(v){
            for (let i = 0; i < this.arr.length; i++) {
                this.$set(this.arr,i,false);
            }
            this.$set(this.arr,v,true);
            switch (v) {
                case 0:
                    this.$router.replace('/msg');
                    break;
                case 1:
                    this.$router.replace('/');
                    break;
            }
        }
    },
    mounted(){
        window.addEventListener('scroll', this.scrollToTop)
        this.$refs.to.style.display = 'none';
    }
}
</script>

<style scoped>
.share {
    position: absolute;
    right: 2rem;
    top: 50%;
    margin-top: -1.8rem;
}
.Mb {
    margin-top: 9.6rem;
}
.Slike {
    margin-top: 2rem;
    background: #fff;
    font-size: 2.4rem;
    color: #4d4d4d;
    border-bottom: 1px solid #ccc;
}
.Sliketop {
  font-size: 3rem;
  padding: 1.2rem 0 2.5rem 0;
}
.Sliketopline {
  display: inline-block;
  width: 6rem;
  border: 1px solid #cccccc;
  vertical-align: middle;
}
.Slikew {
  display: inline-block;
  margin: 0 1.5rem;
}
.tu {
    width: 100%;
    height: 100%;
}
.Slikemain {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.Slikered {
    color: #e83d41;
}
.Sline {
  height: 16rem;
  width: 0;
  border-left: 0.2rem solid #ccc;
  padding-left: 5.9rem;
  margin-left: -8rem;
}
.Nbox {
    height: 12.6rem;
    width: 12.8rem;
    border: 1px solid #ccc;
    padding: 3rem 4.5rem;
}
.Nzi {
    width: 15.2rem;
    text-align: left;
    margin-left: 3.9rem;
}
.Sback {
    position: fixed;
    top: 50%;
    right: 2rem;
    height: 4.8rem;
    width: 4.8rem;
    border-radius: 50%;
    transition: all 2s ease-in;
}
.select {
    font-size: 2.4rem;
    position: absolute;
    top: 8.3rem;
    right: 2rem;
    height: 21rem;
    width: 14.2rem;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2rem;
    z-index: 10;
    padding: 3.5rem 0.7rem 3.3rem 1rem;
}
.Mcolor {
    vertical-align: middle;
    margin-right: 1rem;
}
.Mli {
    margin-bottom: 2.8rem;
    text-align: left;
}
.Mjian {
    position: absolute;
    z-index: 10;
    top: 6.4rem;
    right: 4rem;
}
.actives {
    color: #e83d41;
}
</style>